<template>
	<view class="u-rela">
		<u-swiper class="page-bg" height="500" :list="list"></u-swiper>
		<view class="page-wrap">
			<div class="u-flex">
				<text class="u-font-44 blod u-m-l-15 u-flex-1">{{dataList.title}}</text>
			</div>
			<view class="desc" v-html="dataList.content">
				<!-- 嗣汉天师府，又称龙虎山天师府、相国仙府、天下道庭，位于江西省鹰潭市贵溪市上清镇龙虎山上，地处龙虎山中部，南朝琵琶峰，背靠华山，门临泸溪河；始建于明太祖洪武元年（1368年），后屡加修建，现存木构建筑均为明清建造遗存，为道教第十五洞天第三十二福地、道教正一派兼龙虎宗祖庭。
				嗣汉天师府总占地面积4.2万平方米，总建筑面积1.4万平方米，坐北朝南，在保持明清建筑格局的基础上，以府门、二门、私第为中轴线，修有玉皇殿、天师殿、玄坛殿、法箓局、提举署、万法宗坛等建筑，是现龙虎山地区唯一的道教活动场所。 -->
			</view>

		</view>
		<!-- 留言 -->
		<view class="msg-wrap">
			<view class="u-flex">
				<image class="icon-comment"
					src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/icon-comment.png" mode="widthFix">
				</image>
				<text class="u-font-36 blod u-m-l-15">留言</text>
			</view>
			<div class="list">
				<div class="item" v-for="item in commentList" :key="item.message_id">
					<image
						:src="item.userinfo.avatar =='' ? 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/icon-avatar.png' : item.userinfo.avatar"
						mode="widthFix"></image>
					<div class="u-font-28 blod">{{ item.userinfo.nickname }}</div>
					<text class="u-font-24 u-tips-color">{{ item.time }}</text>
					<view class="u-font-28 u-m-t-30">{{ item.content }}</view>
				</div>
				<!-- <div class="item">
					<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/icon-avatar.png" mode="widthFix"></image>
					<div class="u-font-28 blod">游客_ODA5NEwmj</div>
					<text class="u-font-24 u-tips-color">2023-05-30 16:50</text>
					<view class="u-font-28 u-m-t-30">地方很美，偶尔远离大城市的喧嚣看看乡下美景，
						别有一番滋味</view>
				</div> -->
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				list: [{
						image: 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-v-15.png',
					},
					{
						image: 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-v-15.png',
					},
					{
						image: 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-v-15.png',
					}
				],

				id: '',
				dataList: {},
				commentList: [], //评论列表
			}
		},
		onLoad(options) {
			// console.log(options);
			this.id = options.id

			// 历史文化
			this.get_villages_culture(this.id)

			// 评论列表
			this.get_comment_index(options.id)
		},
		methods: {
			// 历史文化
			get_villages_culture(village_id) {
				uni.showLoading({
					title: '加载中...'
				});
				this.$http({
					url: this.api.villages_culture,
					method: 'GET',
					data: {
						village_id
					}
				}).then(res => {
					if (res.code == 1) {
						uni.hideLoading();
						this.dataList = res.data
					}
				})
			},

			// 评论列表
			get_comment_index(id) {
				uni.showLoading({
					title: '加载中...'
				});
				this.$http({
					url: this.api.comment_index,
					method: 'GET',
					data: {
						type: 6,
						target_id: id
					}
				}).then(res => {
					// console.log(res,'评论列表');
					if (res.code == 1) {
						uni.hideLoading();
						this.commentList = res.data.list
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .u-swiper-indicator {
		bottom: 70rpx !important;
	}

	.page-bg {
		position: relative;
		width: 750rpx;
		height: 500rpx;
		z-index: 1;
	}


	.page-wrap {
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		background-color: #fff;
		padding: 30rpx;
		margin-top: -50rpx;
		position: relative;
		z-index: 2;
	}

	.desc {
		font-size: 28rpx;
		margin-top: 44rpx;
		text-indent: 2em;
		line-height: 48rpx;
	}

	.msg-wrap {
		background: #fff;
		padding: 30rpx;
		margin-top: 20rpx;

		.icon-comment {
			width: 36rpx;
			height: 36rpx;
		}

		.list {

			.item {
				display: grid;
				grid-template-columns: 68rpx 1fr;
				gap: 0 20rpx;
				border-bottom: 1px solid #E6E6E6;
				margin-top: 40rpx;
				padding-bottom: 60rpx;

				image {
					width: 68rpx;
					height: 68rpx;
					grid-row: 1/4;
				}

				&:last-of-type {
					border: 0;
				}

			}
		}
	}
</style>
<style>
	page {
		padding: 0;
	}
</style>